<template>
    <ul>
        <li :class="{active:item.done}" v-for="item in newDta" :key="item.id" style="list-style: none"><input type="checkbox" :checked="item.done" @click="choosez(item),xuanze()">{{item.name}}
            <button @click="del(item),xuanze()">删除</button>
            {{item.done}}
        </li>
        {{lwl}}
        123
    </ul>
</template>
<script setup>
import {computed, onMounted ,ref} from 'vue'
import emitter from '../plugins/Bus'

let lists = ref([])
// let refFn = ()
onMounted(()=>{
    emitter.on('fn',(e)=>{
       console.log(e);
        if(!!e.name){ 
            lists.value.push(e)
        }else{
            alert('请输入内容')
        }
    })
})
const del = (item)=>{
lists.value = lists.value.filter(p=>p.id!==item.id)
}

let choosez = function(e){
    e.done=!e.done
}

let xuanze = function(){
    emitter.emit('fns',lists)
    console.log(lists.value, 1212121);

}



    
    // lists.value=[]
let lwl = ref('all')
emitter.on('fnss', (e) => {
    lwl.value=e
    console.log(lwl.value);
})
let newDta = computed(()=>{
    switch (lwl.value) {
        case "all":
            return lists.value
        case "all1":
            return lists.value.filter(p => p.done == true)
        case "all2":
            return lists.value.filter(p => p.done == false)
    }
})
    




</script>

<style>
    .active{
        background-color: pink;
    }
    
</style>